<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--小胡子语法{{}}方法不可省略（）-->
  <button @click="btn1click">btn1click</button>
  <button @click="btn1click()">btn1click</button>
  <button @click="btn2click">btn2click</button>
  <button @click="btn2click()">btn2click</button>
  <!--同时需要传参数和事件使使用 $event abc必须定义在data中,或者直接传常量加双引号或者数字-->
  <button @click="btn3click(123,$event)">btn3click</button>
</div>
<script src="../js/vue.js"></script>
<script type="application/javascript">
  const app = new Vue({
    el: "#app",
    data: {
      count: 0,
      abc: "sxsx"
    },
    methods: {
      btn1click: function () {
        console.log('btn1click')
      },
      // 要求传一个参数，本身没有传参数如果使用（）
      // 返回undefined，如果只是函数名不加（）返回的是点击事件
      btn2click: function (event) {
        // console.log(event.path)
        if (event) {
          console.log('sss')
          // 方法阻止元素发生默认的行为
          event.preventDefault()
        }
      },
      btn3click: function (i,event) {
        console.log(event,i)
      }
    }

  })
</script>
</body>
</html>
